<template>
  <div style="position: relative;">
    <van-nav-bar
      title="修改个人资料"
      left-text="返回"
      left-arrow
      @click-left="$router.push('/personal')"
    />
    <!-- 背景 -->
    <div class="my-logo"></div>
    <!-- 头像 -->
    <van-uploader class="modify_head" v-model="fileList" :max-count="1" >
      <van-image
        round
        fill="contain"
        width="6rem"
        height="6rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
    </van-uploader>
    <!-- 内容 -->
    <div class="modify_center">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          v-model="value1"
          label="手机号"
          name="pattern"
          placeholder="手机号"
          :rules="[{ pattern:/^1 [3-9] [0-9]{9}$/, message: '请输入正确内容' }]"
        />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1" checked-color="#E6A145">小姐姐</van-radio>
              <van-radio name="2" checked-color="#E6A145">小哥哥</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="rate" label="对我们评分">
          <template #input>
            <van-rate v-model="rate" icon="like" void-icon="like-o" />
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="datetimePicker"
          :value="timeValue"
          label="生日"
          placeholder="点击选择年龄"
          @click="show = true"
        />
        <van-popup v-model="show" position="bottom">
          <van-datetime-picker v-model="currentDate" type="date" @change="changeFn()" @confirm="confirmFn()" @cancel="cancelFn()"/>
        </van-popup>
        <van-field
          readonly
          clickable
          name="area"
          :value="value"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">保存</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import area from "@/views/Mobile/user/area";
export default {
  data(){
    return{
      // 昵称
      username:'',
      // 手机号
      value1:'',
      fileList: [],
      radio: '0',
      rate: 1,
      // 生日
      timeValue:'',
      show: false,
      currentDate: new Date(),
      changeDate: new Date(),
      // 地区
      value: '',
      showArea: false,
      areaList: area.AddressInfo, 
    }
  },
  methods: {
    // 地区
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    changeFn() { // 值变化是触发
        this.changeDate = this.currentDate // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
      },

      confirmFn() { // 确定按钮
        this.timeValue = this.timeFormat(this.currentDate);
        this.show = false;
      },
      // 取消按钮
      cancelFn(){
        this.show = false;
      },
      timeFormat(time) { // 时间格式化 2019-09-08
        let year = time.getFullYear();
        let month = time.getMonth() + 1;
        let day = time.getDate();
        return year + '年' + month + '月' + day + '日'
      },

    onSubmit(){}
  },
  mounted() {
      this.timeFormat(new Date());
    }
};
</script>



<style lang="scss" scoped>
.my-logo {
  width: 100%;
  height: 45vw;
  padding: 20px 0;
  background-image: url("@/assets/img/modify.jpg");
  
  }
  .modify_head{
    position: absolute;
    bottom: 55%;
    left: 40%;
    // transform:translateY(-50%); /*百分比的参照物是自身 */
  }
  .modify_center{
    // margin: 20vw;
    margin-top: 13vw;
      .img-icon {
      height: 20px;
      }
  }
</style>
<style scoped>
::v-deep .van-nav-bar__text {
  color: #000;
}
::v-deep .van-nav-bar .van-icon {
  color: #000;
}
</style>